<template>
  <div class='m-collection'>
    <!-- search -->
    <el-form class='m-collection_form' :inline='true' label-width="80px">
      <el-form-item label='收款状态'>
        <a-select class='form-content' v-model='search.status' :options='statusList' />
      </el-form-item>
      <el-form-item label='销售人员'>
        <span style='padding-right: 10px'>{{ sellerName }}</span>
        <el-button size='small' type='primary' @click='showStaffDialoog'>选择销售人员</el-button>
      </el-form-item>
      <div class='btnWrap'>
        <el-button @click='clearSearch'>清空</el-button>
        <el-button @click='searchFun'>搜索</el-button>
      </div>
    </el-form>

    <!-- table -->
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='180' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button size='mini' @click='detail(scope.row)'>详情</el-button>
            <el-button size='mini' @click='deleteOrder(scope.row)'>删除</el-button>
            <el-button v-if='scope.row.status !== "3"' size='mini' @click='audit(scope.row)'>审核</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
 
    <staff-dialog ref='staffDialog' @getData='getStaff' />
    <collection-dialog ref='collectionDialog' :id='selectId' :status='selectStatus' @update='searchFun' />
  </div>
</template>

<script>
import staffDialog from '@/components/business/StaffsDialog'
import collectionDialog from '@/module/firm/collectionDialog'
import { orderStatus } from '@/api/order'

export default {
  name: 'm-collection',

  components: {
    staffDialog,
    collectionDialog
  },

  data() {
    const filterTime = window.$tools.filterTime
    const filterAuditStatus = (value) => {
      return value === '1' ? '待审核' : '已审核'
    }
    return {
      search: {
        seller: '',
        status: ''
      },
      sellerName: '',
      tableKeys: [
        { prop: 'payer_name', label: '收款人', minWidth: '100' },
        { prop: 'order_count', label: '订单总数', minWidth: '100' },
        { prop: 'amount', label: '收费（元）', minWidth: '100' },
        // { prop: 'seller_name', label: '收款形式', minWidth: '100' },
        { prop: 'time', label: '提交时间', minWidth: '100', filter: filterTime },
        { prop: 'status', label: '收款状态', minWidth: '100', filter: filterAuditStatus }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      selectStatus: 0,
      statusList: orderStatus.map(v => ({
        label: v.desc,
        value: v.type
      }))
    }
  },

  mounted() {
    this.searchFun()
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      const { status, seller } = this.search
      const params = { aMerchantId: this.aFirmId, aPageNum, aPageSize }
      if (status || status === 0) params.aStatus = status
      if (seller || seller === 0) params.aSellerId = seller
      return this.$api.orderGetPayments(params)
    },

    getData(data) {
      data.forEach(v => {
        v.isCanHanlde = v.status === 6
      })
      this.data = data
    },

    clearSearch() {
      Object.keys(this.search).forEach(v => {
        this.search[v] = ''
      })
      this.searchFun()
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    showStaffDialoog() {
      this.$refs.staffDialog.show()
    },

    getStaff({ name, staff_id }) {
      this.search.seller = staff_id
      this.sellerName = name
    },

    async deleteOrder({ pay_id }) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该订单吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.orderDeletePayment({ aPayId: pay_id })
          this.ifRequesting = false
          if (code === 0) {
            await this.searchFun()
          }
          return code
        }
      })
    },

    async audit({ pay_id }) {
      if (this.ifRequesting) return false
      this.ifRequesting = true
      const { code } = await this.$api.orderConfirmPayment({ aPayId: pay_id })
      this.ifRequesting = false
      if (code === 0) {
        await this.searchFun()
        this.__notify('提示', '审核成功')
      }
    },

    detail({ pay_id, status }) {
      this.selectId = pay_id
      this.selectStatus = status
      console.log(this.$refs)
      this.$refs.collectionDialog.show()
    }
  }
}
</script>

<style lang='less'>
.m-collection {
  &_form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    .btnWrap {
      display: flex;
      // justify-content: flex-end;
      padding-bottom: 20px;
    }
  }
}
</style>